import React from 'react';
import './index.scss';

const LoadingStarCenter = (
  <svg fill="none" version="1.1" width="40" height="40" viewBox="0 0 16 16">
    <defs>
      <clipPath id="master_svg0_562_26199">
        <rect x="0" y="0" width="16" height="16" rx="0" />
      </clipPath>
      <linearGradient x1="0" y1="1" x2="1" y2="0" id="master_svg1_518_28276">
        <stop offset="0%" stopColor="#007EED" stopOpacity="1" />
        <stop offset="100%" stopColor="#B36CE6" stopOpacity="1" />
      </linearGradient>
    </defs>
    <g clipPath="url(#master_svg0_562_26199)">
      <g style={{ opacity: 0.4 }}>
        <path
          d="M8.061779999999999,2.00947555C8.120149999999999,2.028933,8.16555,2.0743337,8.18501,2.1327059999999998L9.50291,6.08645C9.567440000000001,6.28034,9.71958,6.43247,9.91346,6.49701L13.8672,7.81492C13.9465,7.84147,14,7.91577,14,7.99944C14,8.08311,13.9465,8.15742,13.8672,8.183959999999999L9.91346,9.50188C9.719570000000001,9.56642,9.567440000000001,9.71855,9.50291,9.91243L8.18501,13.8662C8.158760000000001,13.946,8.08422,14,8.00017,14C7.91611,14,7.84157,13.946,7.81532,13.8662L6.49807,9.91243C6.43353,9.71855,6.2814,9.56642,6.08752,9.50188L2.133817,8.183959999999999C2.0539698,8.157720000000001,2.000000000000019,8.083169999999999,2.000000000000019,7.99912C1.9999999628883,7.91507,2.0539698,7.84052,2.133817,7.81427L6.08752,6.49765C6.2814,6.43312,6.43353,6.28099,6.49807,6.0871L7.81597,2.133354C7.84988,2.0311611,7.96033,1.9759335,8.062429999999999,2.0101238L8.061779999999999,2.00947555Z"
          fill="url(#master_svg1_518_28276)"
          fillOpacity="1"
        />
      </g>
    </g>
  </svg>
);

const LoadingStartAround = (
  <svg fill="none" version="1.1" width="40" height="40" viewBox="0 0 16 16">
    <defs>
      <clipPath id="master_svg0_562_26203">
        <rect x="0" y="0" width="16" height="16" rx="16" />
      </clipPath>
      <linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg1_518_28276">
        <stop offset="0%" stopColor="#007EED" stopOpacity="1" />
        <stop offset="100%" stopColor="#B36CE6" stopOpacity="1" />
      </linearGradient>
      <linearGradient x1="0.5" y1="0" x2="0.5" y2="1" id="master_svg2_518_28276">
        <stop offset="0%" stopColor="#007EED" stopOpacity="1" />
        <stop offset="100%" stopColor="#B36CE6" stopOpacity="1" />
      </linearGradient>
    </defs>
    <g clipPath="url(#master_svg0_562_26203)">
      <g style={{ opacity: 0.5 }}>
        <path
          d="M12.0181924,2.64056609375C12.0069949,2.64476609375,11.999693363,2.65560609375,12.00000989151,2.66756609375C12.000325885,2.67951609375,12.00819044,2.68995609375,12.0195937,2.69355609375L12.965408,3.0061760937499997L13.30684,3.98129609375C13.31075,3.99258609375,13.32138,4.00016609375,13.33333,4.00016609375C13.34528,4.00016609375,13.35592,3.99258609375,13.35982,3.98129609375L13.70126,3.0061760937499997L14.64707,2.69355609375C14.65848,2.68995609375,14.66634,2.67951609375,14.66666,2.66756609375C14.66697,2.65560609375,14.65967,2.64476609375,14.64847,2.64056609375L13.70126,2.27020309375L13.35982,1.35199429375C13.35692,1.34427449375,13.35077,1.33822365375,13.343,1.33517177375C13.32845,1.32991345375,13.31239,1.33744317375,13.30712,1.35199399375L12.965408,2.2704830937500002L12.0181924,2.64056609375Z"
          fill="url(#master_svg1_518_28276)"
          fillOpacity="1"
        />
      </g>
      <g style={{ opacity: 0.5 }}>
        <path
          d="M1.3515664234375,13.30707C1.3403689234375,13.31127,1.3330673864375,13.32211,1.3333839149475,13.33407C1.3336999084375,13.34602,1.3415644634375,13.35646,1.3529677234375,13.36006L2.2987820234375,13.67268L2.6402140234375002,14.6478C2.6441240234375,14.659089999999999,2.6547540234375,14.66667,2.6667040234375,14.66667C2.6786540234375,14.66667,2.6892940234375002,14.659089999999999,2.6931940234375,14.6478L3.0346340234375,13.67268L3.9804440234375,13.36006C3.9918540234375,13.35646,3.9997140234375,13.34602,4.0000340234375,13.33407C4.0003440234375,13.32211,3.9930440234375,13.31127,3.9818440234375,13.30707L3.0346340234375,12.936707L2.6931940234375,12.0184982C2.6902940234374997,12.0107784,2.6841440234375,12.00472756,2.6763740234375,12.00167568C2.6618240234375,11.99641736,2.6457640234374997,12.00394708,2.6404940234375003,12.0184979L2.2987820234375,12.936987L1.3515664234375,13.30707Z"
          fill="url(#master_svg2_518_28276)"
          fillOpacity="1"
        />
      </g>
    </g>
  </svg>
);

export default function LoadingStarIcon() {
  return (
    <div className="star-icon-container">
      <div className="loading-start-center">{LoadingStarCenter}</div>
      <div className="loading-start-around">{LoadingStartAround}</div>
    </div>
  );
}
